<template>
  <DialogSubmitForm v-bind="formFrame" ref="form" />
</template>
<script setup lang="ts">
import { MDialogSubmitForm as DialogSubmitForm } from "page-com";
import { shallowReactive, useTemplateRef, ref } from "vue";
import { addMenu } from "@/api/user/menuApi";
import { DialogSubmitFormFrame, DialogSubmitFormInstance } from "page-com";
import { successMsg, errorMsg } from "@/utils/message";
const form = useTemplateRef<DialogSubmitFormInstance>("form");
const parentMenu = ref<Partial<ShopTreeMenuVo>>();
const parentPath = ref("");
const formFrame = shallowReactive<DialogSubmitFormFrame>({
  submitFun: async function (data) {
    data.menuPath = parentMenu.value?.menuPath + "/" + data.menuPath;
    let res = await addMenu(data);
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("添加成功");
      emit("saveSuccess", { ...data, id: res.data });
      form.value.hide();
    }
  },
  width: "600px",
  items: [
    {
      frameType: "tag",
      label: "所属菜单",
      key: "parentPath",
      render: () => parentPath,
      class: "",
      tag: "info"
    },
    {
      frameType: "input",
      label: "菜单名称",
      key: "menuName",
      validations: {
        required: true
      }
    },
    {
      frameType: "input",
      label: "菜单图标",
      key: "menuIcon"
    },
    {
      label: "菜单路径",
      frameType: "input",
      prepend: () => parentMenu.value?.menuPath + "/",
      key: "menuPath",
      validations: {
        required: true
      }
    },
    {
      label: "菜单类型",
      frameType: "select",
      key: "type",
      validations: {
        required: true
      },
      options: [
        {
          id: 0,
          text: "菜单"
        },
        {
          id: 1,
          text: "按钮"
        }
      ],
      value: 0
    }
  ]
});
function show(menu: Partial<ShopTreeMenuVo>, parentPathParam: string) {
  parentMenu.value = menu;
  form.value.show();
  parentPath.value = parentPathParam;
}

defineExpose({ show });
const emit = defineEmits<{
  saveSuccess: [data: ShopTreeMenuVo];
}>();
</script>
